<script setup>
import { ref, onMounted, onBeforeUnmount, defineExpose } from 'vue'
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/mode-java'
import 'ace-builds/src-noconflict/theme-eclipse'
import 'ace-builds/src-noconflict/ext-language_tools'

// 定义选项
const options = {
  theme: `ace/theme/eclipse`,
  mode: `ace/mode/java`,
  maxLines: 20,
  minLines: 10,
  fontSize: 15
}

// 创建响应式引用
let editor = null
const emit = defineEmits(['update:value'])
const editorform = ref(null)

// 初始化编辑器
onMounted(() => {
  editor = ace.edit(editorform.value, options)
  editor.setOptions({
    enableBasicAutocompletion: true
  })
  editor.getSession().on('change', () => {
    // 当编辑器内容变化时，触发自定义事件并传递编辑器的内容
    emit('update:value', editor.getValue())
  })
})

// 销毁编辑器实例
onBeforeUnmount(() => {
  if (editor) {
    editor.destroy()
    editor = null
  }
})

// 设置编译器展示的值
const setAceCode = (content) => {
  editor.setValue(content)
}

defineExpose({
  setAceCode
})
</script>

<template>
  <div ref="editorform" class="ace-editor"></div>
</template>

<style lang="scss" scoped>
.ace-editor {
  margin: 10px 0 0 0;
  width: 90%;
}
</style>
